<template>
	<!--    <div class="newuserrequest-main">-->
	<!--        <el-table :data="showData" height="85%" style="margin-left: 2%; width: 96%;">-->
	<!--            <el-table-column prop="account" label="账号"></el-table-column>-->
	<!--            <el-table-column prop="username" label="用户名"></el-table-column>-->
	<!--            <el-table-column prop="userPhone" label="用户电话"></el-table-column>-->
	<!--            <el-table-column prop="roleName" label="用户类型"></el-table-column>-->
	<!--            <el-table-column prop="compName" label="所属单位"></el-table-column>-->
	<!--            <el-table-column prop="createTime" label="申请时间"></el-table-column>-->
	<!--            <el-table-column prop="priorityResult" label="申请结果"></el-table-column>-->
	<!--            <el-table-column label="操作">-->
	<!--                <template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">-->
	<!--                    <el-button @click="handleConfirm(scope.row, '通过')" type="text" size="small">同意</el-button>-->
	<!--                    <el-button @click="handleConfirm(scope.row, '未通过')" type="text" style="color: red;"-->
	<!--                               size="small">拒绝-->
	<!--                    </el-button>-->
	<!--                </template>-->
	<!--            </el-table-column>-->
	<!--        </el-table>-->
	<!--        <div class="patient-pagination">-->
	<!--            <el-pagination-->
	<!--                    background-->
	<!--                    layout="prev, pager, next,jumper, ->, total, slot"-->
	<!--                    :total="queryTerms.total"-->
	<!--                    @current-change="handleCurrentChange"-->
	<!--                    :current-page="queryTerms.currentPage"-->
	<!--                    :page-size="queryTerms.pageSize"-->
	<!--                    style="text-align: center">-->
	<!--            </el-pagination>-->
	<!--        </div>-->
	<!--    </div>-->
	<div class="newuserrequest-main">
		<div class="table_main">
			<ElTable :data="showData"
					 :header-cell-style="{color: '#ffffff',background: '#6f7f93'}"
					 class="table_border"
					 :highlight-current-row="false">
				<ElTableColumn type="index" width="50"/>
				<ElTableColumn prop="account" label="账号" align="center" show-overflow-tooltip/>
				<ElTableColumn prop="username" label="用户名" align="center" show-overflow-tooltip/>
				<ElTableColumn prop="userPhone" label="联系方式" align="center" show-overflow-tooltip/>
				<ElTableColumn prop="roleName" label="用户类型" align="center" show-overflow-tooltip/>
				<ElTableColumn prop="compName" label="所属单位" align="center" show-overflow-tooltip/>
				<ElTableColumn prop="createTime" label="申请时间" align="center" show-overflow-tooltip>
					<template #default="scope">
                    <span class="content_style"
						  :title="scope.row.createTime">{{scope.row.createTime }}</span>
					</template>
				</ElTableColumn>
				<ElTableColumn prop="priorityResult" label="审批状态" align="center" show-overflow-tooltip>
					<template #default="scope">
						<div class="cell">
							<span :class="['dot',scope.row.priorityResult == '审核中' ? 'orange-dot' : scope.row.priorityResult == '通过' ? 'green-dot' : 'red-dot',]"/>
							<span :style="{color: scope.row.priorityResult == '审核中' ? '#ff9f2d' : scope.row.priorityResult == '通过' ? '#01ba62' : '#ba0101'}">
                            {{ scope.row.priorityResult }}
                        </span>
						</div>
					</template>
				</ElTableColumn>

				<ElTableColumn label="操作" align="center" width="250">
					<template #default="scope">
						<div class="btn_box">
							<div class="edit_btn" :style="{
                                    cursor: scope.row.priorityResult == '审核中' ? 'pointer' : 'not-allowed' ,
                                    color: scope.row.priorityResult == '审核中' ?  '#2871ff' : '#c0c4cc' }"
								 @click="handleConfirm(scope.row, '通过')">同意
							</div>
							<div class="edit_btn" :style="{
                                    cursor: scope.row.priorityResult == '未通过' ? 'not-allowed' : 'pointer',
                                    color: scope.row.priorityResult == '未通过' ?  '#c0c4cc' : '#2871ff'}"
								 @click="handleConfirm(scope.row, '·拒绝')">
								拒绝
							</div>
						</div>
					</template>
				</ElTableColumn>
			</ElTable>

		</div>

		<div class="pagination">
			<ElPagination
					layout="total, prev, pager, next, jumper"
					:currentPage="queryTerms.currentPage"
					:page-size="queryTerms.size"
					:total="queryTerms.total"
					@current-change="handleCurrentChange"/>
		</div>
	</div>


</template>

<script>
	import webSetInfo from "../server/webSetInfo";

	export default {

		data() {
			return {
				showData: [],
				userInfo: {},
				requestType: 0,
				totalNumber: 0,
				queryTerms: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
				},
			}
		},
		mounted() {
			this.userInfo = this.$store.state.userAllInfos;
			if (this.userInfo == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				this.getUserInfo();
			}
		},
		methods: {
			handleConfirm(e, result) {
				this.$confirm('确定' + result + '用户申请吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios_token({
						url: `${webSetInfo.apiUrl}` + `/user/apply/confirm`,
						method: "post",
						data: {
							userId: e.userId,
							account: e.account,
							priorityResult: result
						}
					})
							.then(res => {
								if (res.code === 200 && res.data) {
									this.$message.success(res.message);
									//重新加载
									this.handleCurrentChange();
								} else {
									this.$message.error(res.message)
								}
							})

				}).catch(() => {
					// 点击取消进行的操作
				});
			},

			getUserInfo() {
				let that = this;
				this.$axios_token({
					url: `${webSetInfo.apiUrl}` + `/user/getUserInfo`,
					method: "post",
					data: {
						pageSize: this.queryTerms.pageSize,
						pageNo: this.queryTerms.currentPage,
					}
				})
						.then(response => {
							let result = response.data
							if (response.code == 200) {
								if (result.length == 0) {
									that.$message.error("暂无更多数据")
								} else {
									that.showData = result.records;
									that.queryTerms.currentPage = parseInt(result.current);
									that.queryTerms.pageSize = parseInt(result.size);
									that.queryTerms.total = parseInt(result.total);
								}
							}
						})
			},

			handleCurrentChange(e) {
				this.queryTerms.currentPage = e;
				this.getUserInfo();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.newuserrequest-main {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.table_main {
		margin-top: 40px;

		:deep(.el-table tr) {
			font-size: 16px;
		}

		.cell {
			padding-right: 10px;
			padding-left: 10px;
			overflow: hidden;
			line-height: 23px;
			white-space: normal;
			text-overflow: ellipsis;
			word-break: break-all;

			.dot {
				display: inline-block;
				width: 6px;
				height: 6px;
				margin-right: 5px;
				border-radius: 50%;
			}

			.orange-dot {
				background: #ff8a00;
			}

			.green-dot {
				background: #01ba62;
			}

			.red-dot {
				background: #ba0101;
			}

		}

		.btn_box {
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans CN;

			.edit_btn {
				margin-right: 8px;
				color: #2871ff;
				cursor: pointer;
			}

		}

		:deep(.el-table thead) {
			color: #909399;
			font-weight: 500;
		}

		:deep(.el-table__body-wrapper) {
			background-color: #f6f9fc;
		}

		:deep(.el-table tr) {
			color: #333333;
		}

		:deep(.el-table th.el-table__cell.is-leaf) {
			border-bottom: 1px solid #f6f9fc;
		}

		:deep(.el-table th.el-table__cell) {
			color: #fff;
			background-color: #6f7f93;
		}

		:deep(.el-table .el-table__cell) {
			padding: 12px 0;
			/*background-color: #fff !important;*/
			border-bottom: 1px solid #f6f9fc;
		}

	}

	.pagination {
		position: absolute;
		right: 30px;
		bottom: 0;
		margin-bottom: 19px;

		:deep(.el-icon) {
			font-size: 19px !important;
		}

		:deep(.el-input__inner) {
			color: #4a4a4a;
		}

		:deep(.el-pagination .el-pager li) {
			color: #4a4a4a;
			font-size: 16px;
			background: none;
		}

		:deep(.el-pagination button) {
			background: none;
		}

		:deep(.el-input__wrapper) {
			background: none;
			border: 1px solid #4a4a4a;
			box-shadow: none;
		}

		:deep(.el-pagination__total) {
			color: #2871ff;
		}

		:deep(.el-pagination__jump) {
			color: #4a4a4a;
		}

	}


</style>
